import { useNavigate } from 'react-router-dom'
import style from '../pages/home/index.module.css'

interface ServiceCardProps {
    title: string;
    img: string;
    text?: string;
    className?: string;
    titleClassName?: string;
    onClick?: () => void;
}

function ServiceCard({ title, img, text, className, titleClassName, onClick }: ServiceCardProps) {
    const navigate = useNavigate()

    const handleClick = () => {
        if (onClick) {
            onClick()
        } else {
            // 根据标题跳转到不同页面
            switch (title) {
                case '人脸识别':
                    navigate('/face_recognition')
                    break
                case '预约挂号':
                    navigate('/doctor_list')
                    break
                case '极速问诊':
                    navigate('/Wenz')
                    break
                default:
                    console.log('点击了:', title)
            }
        }
    }

    return (
        <div 
            className={className || style.serviceCard}
            onClick={handleClick}
            style={{ cursor: 'pointer' }}
        >
            <img src={img} alt="" className={style.serviceIcon} />
            <br />
            <b className={titleClassName || style.serviceTitle}>{title}</b>
            {text && <p className={style.serviceDescription}>{text}</p>}
        </div>
    )
}

export default ServiceCard

